<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.write,.mycanvas{
				text-align: center;
			}
			#mycanvas{
				background-color: #fff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">签名板</h1>
		</header>
		<div class="mui-content">
		    <div class="write">
		    	<button type="button" class="mui-btn mui-btn-blue">清除</button>
		    	<button type="button" class="mui-btn mui-btn-blue">保存</button>
		    </div>
		    <div class="mycanvas">
		    	<canvas id="mycanvas" width='420px' height='300px'></canvas>
		    </div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
		    (function(){
		    	var canvas = document.getElementById("mycanvas"),
		    	    ctx=canvas.getContext('2d');
		    	  
		    	    	function eventDown(e){                 
							e.preventDefault();                 
							mousedown=true;             
						}   
						function eventUp(e){            
							e.preventDefault();                 
							mousedown=false;             
						}               
						function eventMove(e){                 
							e.preventDefault(); 
							 var _box = canvas.getBoundingClientRect();
							if(mousedown){                     
								if(e.changedTouches){                         
									e=e.changedTouches[e.changedTouches.length-1];                     
								}
			
//								var x = (e.clientX - canvas.left) * (canvas.width/bbox.width);                       
//					                y = (e.clientY-260);
                                var x=e.clientX-canvas.offsetLeft*(canvas.width/canvas.width),  
                                    y=e.clientY-canvas.offsetTop*(canvas.height/canvas.height)  
			                    console.log(x);
								with(ctx){                    
									beginPath()                     
									arc(x, y, 3, 0, Math.PI * 2);                         
									fill();                     
								}                
							}             
						}  
		    	   
		    	    canvas.addEventListener('touchstart', eventDown);             
					canvas.addEventListener('touchend', eventUp);             
					canvas.addEventListener('touchmove', eventMove); 	
					
		    }())
		</script>
	</body>

</html>